﻿#products-grid {
    margin: var(--space-8) auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--space-4);
}

.product-item {
    padding: var(--space-4);
    border-radius: var(--border-radius-medium);
    text-align: center;
    background-color: var(--color-gray-600);
    overflow: hidden;
}

.product-item img {
    width: 100%;
    height: 10rem;
    object-fit: cover;
}

.product-item-content {
    padding: var(--space-4);
}

.product-item-content h2 {
    font-size: 1.15rem;
    margin: var(--space-2) 0;
}

.product-item-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-4);
    justify-content: center;
}

#product-details header {
    margin-top: var(--space-8);
    padding: var(--space-8);
    background-color: var(--color-gray-600);
    gap: var(--space-8);
}

#product-details img {
    width: 100%;
    height: 6rem;
    object-fit: cover;
    border-radius: var(--border-radius-medium);
    border: 1px solid var(--color-gray-100);
}

#product-info {
    text-align: center;
}

#product-description {
    background-color: var(--color-primay-50-bg);
    padding: var(--space-8);
    white-space: pre-wrap;
}

@media (min-width: 48rem) {
    #product-details header {
        display: flex;
    }

    #product-details img {
        width: 20rem;
        height: 15rem;
        transform: rotateZ(-10deg);
        margin: var(--space-8);
    }

    #product-info {
        text-align: left;
    }
}